<!--
 * @Author: your name
 * @Date: 2021-04-15 16:08:57
 * @LastEditTime: 2021-04-15 16:45:42
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \newVue\10.v-on指令修饰符.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script src="vue.js"></script>
</head>

<body>
	<div id="app">

		<!-- .stop  阻止事件冒泡 -->
		<div @click="alert('div')" :style="{backgroundColor: 'red'}">
			<button @click.stop="alert('button')">点击我</button>
		</div>


		<!-- .prevent 阻止默认事件 -->
		<form @submit.prevent='onSubmit'>
			<input type="submit">
		</form>

		<!-- .capture 阻止捕获事件 -->
		<div @click.capture="alert('div')" :style="{backgroundColor: 'red'}">
			<button @click.stop="alert('button')">点击我</button>
		</div>

		<div @click.self="alert('div')" :style="{backgroundColor: 'red'}">
			<button @click="alert('button')">点击我</button>
		</div>

		<!-- .once 只执行一次 -->
		<div @click.once="alert('div')" :style="{backgroundColor: 'red'}">
			<button @click="alert('button')">点击我</button>
		</div>

		<div @click.prevent.self='handleClick'>点击</div>
		<div @click.self.prevent='handleClick'>点击</div>

		<input type="text" @keyup.enter='onSubmit'>

	</div>



	<script>
		const vm = new Vue({
			el: '#app',
			methods: {
				alert(str) { alert(str) },
				onSubmit() { console.log('1111') },
				handleClick() { }
			}
		})
	</script>

</body>

</html>